<!-- 系统管理/账号管理 授权 -->
<template>
  <el-form
    ref="form"
    class="mt16"
    label-width="80px"
    :model="form"
    :loading="loading"
  >
    <el-tree
      ref="tree"
      :data="form.treeData"
      :props="defaultProps"
      show-checkbox
      node-key="code"
      :default-expanded-keys="form.checkedResourceCodeList"
      :default-checked-keys="form.checkedResourceCodeList"
    />
    <el-form-item class="fr">
      <el-button class="m-b-20" type="primary" :loading="btnSubmit" plain @click="submitData">
        确 定
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { resourcdTree, accountAuthorize } from '@/api/basicInfo'
export default {
  name: 'AccountAuth',
  props: {
    operationCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      data: [],
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      props: {
        label: 'name',
        children: 'child'
      },
      btnSubmit: false, // 提交按钮默认不禁用
      form: {
        treeData: [],
        partyCode: this.operationCode,
        checkedResourceCodeList: [],
        resourceCodeList: []
      }
    }
  },
  created() {
    this.getResourcdTree()
  },
  methods: {
    // 获取详情数据(全部菜单树、用户授权的菜单树、用户信息)
    getResourcdTree() {
      resourcdTree(this.operationCode)
        .then((res) => {
          const { allResource, authorizeResource, userInfo } = res.data
          this.form.treeData = allResource
          this.form.checkedResourceCodeList = authorizeResource
          this.form.groupCode = userInfo.groupCode
          // 关闭弹窗加载动画
          this.$parent.$parent.authorizeLoad = false
        })
    },
    // 提交
    submitData() {
      // 半选的节点
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      // 选中的节点
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      this.form.resourceCodeList = [...halfCheckedKeys, ...checkedKeys]
      this.btnSubmit = true
      accountAuthorize(this.form)
        .then((res) => {
          this.btnSubmit = false
          this.$message({ message: res.msg, type: 'success' })
          this.$emit('operationComplete')
        })
        .finally(()=>{
          this.btnSubmit = false
        })
    }
  }
}
</script>
<style scoped>
.m-b-20 {
  margin-bottom: 20px;
}
</style>
